<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="layout/commonlayout(title='用户详细信息')"><!-- layout文件路径-->

<th:block th:fragment="css">
    <!--如果没有内容，请保持 -->
    <!--DataTables [ OPTIONAL ]-->
    <link rel="stylesheet" href="/plugins/ztree/css/zTreeStyle/zTreeStyle.css">
    <!--Chosen [ OPTIONAL ]-->
    <link rel="stylesheet" href="/plugins/chosen/chosen.min.css">
    <link rel="stylesheet" href="/plugins/webuploader-0.1.5/webuploader.css">


    <style>
        #avatarimgBtnId div:nth-child(2){width:100%!important;height:100%!important;}
        .header{
            width:100px;
            height: 100px;
        }
    </style>
</th:block>

<div th:fragment="content">
    <!--Page content-->
    <!--===================================================-->
    <div id="page-content">

        <div class="panel">
            <div class="panel-heading">
                <div class="panel-control pull-left">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab_1" aria-expanded="true">基本信息</a></li>
                        <li><a data-toggle="tab" href="#tab_2" aria-expanded="false">设置密码</a></li>
                        <li><a data-toggle="tab" href="#tab_3" aria-expanded="false">设置角色</a></li>
                        <li><a data-toggle="tab" href="#tab_4" aria-expanded="false">微信信息</a></li>
                        <li><a data-toggle="tab" href="#tab_5" aria-expanded="false">上级管理员</a></li>
                        <li><a data-toggle="tab" href="#tab_6" aria-expanded="false">个人介绍</a></li>
                        <li><a data-toggle="tab" href="#tab_7" aria-expanded="false">头像</a></li>
                    </ul>
                </div>
                <h3 class="panel-title">&nbsp;</h3>
            </div>

            <div class="panel-body">
                <form id="formUser" class="smart-form" method="POST" action="">
                    <div class="tab-content padding-10" id="myTabContent">
                        <!--基本信息-->
                        <div class="tab-pane fade in active" id="tab_1">
                            <fieldset>
                                <input id="id" name="id" type="hidden">

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>用户名</label>
                                            <input id="username" name="username"
                                                   class="form-control"
                                                   type="text"
                                                   placeholder=''
                                                   required
                                                   data-msg-required="用户名不能为空"
                                                   data-rule-maxlength="50"
                                                   data-msg-maxlength='亲，太多啦，最多50字符!!'>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>真实姓名</label>
                                            <input id="truename" name="truename"
                                                   class="form-control"
                                                   type="text"
                                                   placeholder=''
                                                   data-rule-maxlength="100"
                                                   data-msg-maxlength='亲，太多啦，最多100字符!!'>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>性别</label>
                                            <select id="sex" name="sex" class="form-control">
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">

                                            <label>状态(0:禁用;1:正常)</label>
                                            <select id="status" name="status" class="form-control">
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>所属部门</label>
                                            <select id="deptId" name="deptId" class="form-control">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>电子邮箱</label>
                                            <input id="email" name="email"
                                                   class="form-control"
                                                   type="text"
                                                   placeholder=''
                                                   data-rule-maxlength="100"
                                                   data-msg-maxlength='亲，太多啦，最多100字符!!'>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>手机号码</label>
                                            <input id="mobile" name="mobile"
                                                   class="form-control"
                                                   type="text"
                                                   placeholder=''
                                                   data-rule-maxlength="100"
                                                   data-msg-maxlength='亲，太多啦，最多100字符!!'>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>出生日期</label>
                                            <input id="birth" name="birth"
                                                   class="form-control"
                                                   type="text" placeholder="yyyy-mm-dd">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">

                                            <div class="form-group">
                                                <label>默认主页</label>
                                                <input id="homeUrl" name="homeUrl"
                                                       class="form-control"
                                                       type="text"
                                                       placeholder=''
                                                       data-rule-maxlength="255"
                                                       data-msg-maxlength='亲，太多啦，最多255字符!!'>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>现居住地</label>
                                            <input id="liveAddress" name="liveAddress"
                                                   class="form-control"
                                                   type="text"
                                                   placeholder=''
                                                   data-rule-maxlength="500"
                                                   data-msg-maxlength='亲，太多啦，最多500字符!!'>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>爱好</label>
                                            <input id="hobby" name="hobby"
                                                   class="form-control"
                                                   type="text"
                                                   placeholder=''
                                                   data-rule-maxlength="255"
                                                   data-msg-maxlength='亲，太多啦，最多255字符!!'>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>省份</label>
                                            <input id="province" name="province"
                                                   class="form-control"
                                                   type="text"
                                                   placeholder=''
                                                   data-rule-maxlength="255"
                                                   data-msg-maxlength='亲，太多啦，最多255字符!!'>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>所在城市</label>
                                            <input id="city" name="city"
                                                   class="form-control"
                                                   type="text"
                                                   placeholder=''
                                                   data-rule-maxlength="255"
                                                   data-msg-maxlength='亲，太多啦，最多255字符!!'>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>所在地区</label>
                                            <input id="district" name="district"
                                                   class="form-control"
                                                   type="text"
                                                   placeholder=''
                                                   data-rule-maxlength="255"
                                                   data-msg-maxlength='亲，太多啦，最多255字符!!'>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>签名URL</label>
                                            <input id="img" name="img"
                                                   class="form-control"
                                                   type="text"
                                                   placeholder=''
                                                   data-rule-maxlength="250"
                                                   data-msg-maxlength='亲，太多啦，最多250字符!!'>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">

                                    </div>
                                </div>

                                <div class="form-group">
                                    <label>备注</label>
                                    <input id="memo" name="memo"
                                           class="form-control"
                                           type="text"
                                           placeholder=''
                                           data-rule-maxlength="2000"
                                           data-msg-maxlength='亲，太多啦，最多2000字符!!'>
                                </div>


                            </fieldset>
                        </div>

                        <!- 设置密码--->
                        <div class="tab-pane fade" id="tab_2">
                            <fieldset>
                                <div class="form-group">
                                    <label>密码<span style="color: red;">*(长度为6-20)</span></label>
                                    <input id="password" name="password"
                                           class="form-control"
                                           type="password"
                                           placeholder=''
                                           data-rule-maxlength="50"
                                           data-msg-maxlength='亲，太多啦，最多50字符!!'>
                                </div>

                                <div class="form-group">
                                    <label>确认密码<span style="color: red;">*</span></label>
                                    <input id="confirmPassword" name="confirmPassword"
                                           class="form-control"
                                           type="password"
                                           placeholder=''
                                           data-rule-maxlength="50"
                                           data-msg-maxlength='亲，太多啦，最多50字符!!'>
                                </div>
                            </fieldset>
                        </div>

                        <!--设置角色-->
                        <div class="tab-pane fade" id="tab_3">
                            <fieldset>
                                <div class="form-group">
                                    <label>选择角色</label>
                                    <select id="roleIds" name="roleIds" multiple="multiple" class="chosen-select">
                                    </select>
                                </div>

                                <div class="form-group" style="display:none;">
                                    <label>角色名</label>
                                    <input id="roleName" name="roleName"
                                           class="form-control"
                                           type="text"
                                           placeholder='角色名'
                                           data-rule-maxlength="2000"
                                           data-msg-maxlength='亲，太多啦，最多2000字符!!'>
                                </div>
                            </fieldset>
                        </div>

                        <!--微信信息-->
                        <div class="tab-pane fade" id="tab_4">
                            <fieldset>
                                <div class="form-group">
                                    <label>微信ID</label>
                                    <input id="wxids" name="wxids"
                                           class="form-control"
                                           type="text"
                                           placeholder=''
                                           data-rule-maxlength="255"
                                           data-msg-maxlength='亲，太多啦，最多255字符!!'>
                                </div>
                                <div class="form-group">
                                    <label>微信名称</label>
                                    <input id="wxname" name="wxname"
                                           class="form-control"
                                           type="text"
                                           placeholder=''
                                           data-rule-maxlength="255"
                                           data-msg-maxlength='亲，太多啦，最多255字符!!'>
                                </div>
                            </fieldset>
                        </div>

                        <!--上一级管理员-->
                        <div class="tab-pane fade" id="tab_5">
                            <fieldset>
                                <div class="form-group">
                                    <label>选择上级管理员</label>
                                    <select id="managerId" name="managerId" class="chosen-select">
                                    </select>
                                </div>

                                <div class="form-group" style="display:none;">
                                    <label>上级管理员</label>
                                    <input id="managerName" name="managerName"
                                           class="form-control"
                                           type="text"
                                           placeholder=''
                                           data-rule-maxlength="255"
                                           data-msg-maxlength='亲，太多啦，最多255字符!!'>
                                </div>
                            </fieldset>
                        </div>

                        <!--个人介绍-->
                        <div class="tab-pane fade" id="tab_6">
                            <fieldset>
                                <div class="form-group">
                                    <label>个人介绍</label>
                                    <textarea id="introduce" name="introduce"
                                              class="form-control"
                                              placeholder=''
                                              data-rule-maxlength="1000"
                                              data-msg-maxlength='亲，太多啦，最多1000字符!!' rows='10'></textarea>
                                </div>
                            </fieldset>
                        </div>

                        <!--头像-->
                        <div class="tab-pane fade" id="tab_7">
                            <fieldset>
                                <div class="form-group">


                                    <input id="imgUrl" name="imgUrl"
                                           class="form-control"
                                           type="hidden"
                                           placeholder=''
                                    />



                                    <div class="col-sm-4">
                                        <div id="imgPreId">
                                            <div>
                                                <div id="avatarimgPreId" class="uploader-list" width="100px" height="100px"></div>

                                            </div>


                                        </div>
                                    </div>
                                    <div class="col-sm-2">

                                        <!--dom结构部分-->
                                        <div id="uploader-demo">
                                            <!--用来存放item-->

                                            <div id="avatarimgBtnId" class="head-scu-btn upload-btn"  >选择图片</div>
                                        </div>

                                    </div>

                                </div>

                            </fieldset>
                        </div>


                    </div>

                    <div class="form-group">
                        <a class="btn btn-info btn-labeled pull-right" onclick="insertOrUpdateForm();">
                            <i class="btn-label ion-ios-checkmark"></i>提交</a>
                    </div>

                </form>
                <!-- form end -->
            </div>
        </div>

        <input type="hidden" id="hidId"/>
    </div>
    <!--===================================================-->
    <!--End page content-->
</div>

<div th:fragment="scripts">
    <!--如果没有内容，请保持-->
    <!--Chosen [ OPTIONAL ]-->
    <script src="/plugins/chosen/chosen.jquery.min.js"></script>
    <script src="/plugins/webuploader-0.1.5/webuploader.min.js"></script>
    <script src="/plugins/webuploader-0.1.5/webuploaderHelper.js"></script>

    <script src="/js/editCommon.js?1"></script>
    <script src="/pagejs/system/user/edit.js"></script>
</div>

</html>
